<!-- 大气耗量统计 -->
<template>
  <div class="consumption-container">
    <div class="tab-bar">
      <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
    </div>
    <!-- <div v-if="activeName === 'pressureGage'">
      <PressureGage />
    </div> -->
    <div v-if="activeName === 'flowMeter'">
      <FlowMeter />
    </div>
    <div v-if="activeName === 'inspection'">
      <Inspection />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomTabs from "@/components/Tabs/index.vue";
import PressureGage from "./component/pressureGage.vue";
import FlowMeter from "./component/flowMeter.vue";
import Inspection from "./component/inspection.vue";

defineOptions({
  name: "GAS_CONSUMPTION_BULKGAS"
});

const tabList = ref([
  // { name: "pressureGage", label: "压力表" },
  { name: "flowMeter", label: "流量统计" },
  { name: "inspection", label: "点检" }
]);
// const activeName = ref("pressureGage");
const activeName = ref("flowMeter");
// 切换tab
const handelTabSelected = val => {
  activeName.value = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");

.consumption-container {
  padding-top: 0;
}
</style>
